<template>
  <div class="margin">
    <div>
      <Button type="info">新增</Button>
      <Button type="warning">批量删除</Button>
      <Button type="success">统计</Button>
    </div>
    <div class="wp">
      <Table border ref="selection" :columns="columns" :data="data"></Table>
      <Button class="select" @click="handleSelectAll(true)">全选</Button>
      <Button class="select" @click="handleSelectAll(false)">取消</Button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "姓名",
          key: "name",
          width: 120,
        },
        {
          title: "年龄",
          key: "age",
          width: 100,
        },
        {
          title: "地址",
          key: "address",
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "预览"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [
        {
          name: "约翰·布朗",
          age: 18,
          address: "纽约第一公园",
          date: "2016-10-03"
        },
        {
          name: "吉姆·格林",
          age: 24,
          address: "伦敦大本钟",
          date: "2016-10-01"
        },
        {
          name: "乔·布莱克",
          age: 30,
          address: "悉尼歌剧院",
          date: "2016-10-02"
        },
        {
          name: "约恩·斯诺",
          age: 26,
          address: "渥太华唐人街",
          date: "2016-10-04"
        }
      ]
    };
  },
  methods: {
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    show(index) {
      this.$Modal.info({
        title: "用户信息",
        content: `姓名：${this.data[index].name}<br>年龄：${this.data[index].age}<br>地址：${this.data[index].address}`
      });
    },
    remove(index) {
      this.data.splice(index, 1);
    }
  }
};
</script>

<style>
.margin{
    margin: 10px 20px 0;
}
.wp{
  margin: 10px 5px;
}
.wp button{
  margin-right: 10px;
}
.select{
  margin-top: 10px;;
}
</style>
